<template>
  <div id="home">
    <header>
      <h1>大数据可视化</h1>
    </header>
    <!-- 大容器 -->
    <div class="container">
      <!-- 左容器 -->
      <div class="itemLeft">
        <!-- 左侧图表1 -->
        <ItemPage>
          <ItemOne/>
        </ItemPage>
        <!-- 左侧图表2 -->
        <ItemPage>
          <ItemTwo/>
        </ItemPage>
      </div>
      <!-- 中间容器 -->
      <div class="itemCenter">
        <MapContainer/>
      </div>
      <!-- 右边容器 -->
      <div class="itemRight">
        <!-- 右侧图表1 -->
        <ItemPage>
          <ItemThree/>
        </ItemPage>
        <!-- 右侧图表2 -->
        <ItemPage>
          <ItemFour/>
        </ItemPage>
      </div>
    </div>
  </div>
</template>

<script>
import ItemPage from "@/components/ItemPage";
import ItemOne from "@/components/ItemOne";
import ItemTwo from "@/components/ItemTwo";
import ItemThree from "@/components/ItemThree";
import ItemFour from "@/components/ItemFour";
import { inject } from "vue";
export default {
  name: "Home",
  components: {
    ItemPage,
    ItemOne,
    ItemTwo,
    ItemThree,
    ItemFour
  },
  setup() {
    // let $echarts = inject("echarts")
    // console.log($echarts)
  }
};
</script>

<style scoped lang="less">
#home {
  header {
    height: 1rem;
    width: 100%;
    h1 {
      font-size: 0.375rem;
      color: #fff;
      text-align: center;
      line-height: 1rem;
    }
  }
  .container {
    min-width: 1000px;
    max-width: 2048px;
    margin: 0 auto;
    border: 1px solid blue;
    padding: 0.125rem 0.125rem 0;
    display: flex;
    // 使用flex布局分配左中右所占分数
    .itemLeft,
    .itemRight {
      flex: 3;
    }
    .itemCenter {
      flex: 5;
      height: 10.5rpx;
      border: 1px solid blue;
      padding: 0.125rem;
      margin: 0.25rem;
    }
  }
}
</style>
